import {View, Button, Text, Image, Swiper, SwiperItem} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './toolsBox.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import toolsBox1 from '@/assets/image/my/toolsBox_1.png';
import toolsBox2 from '@/assets/image/my/toolsBox_2.png';
import toolsBox3 from '@/assets/image/my/toolsBox_3.png';
import toolsBox4 from '@/assets/image/my/toolsBox_4.png';
import toolsBox5 from '@/assets/image/my/toolsBox_5.png';
import toolsBox6 from '@/assets/image/my/toolsBox_6.png';
import toolsBox7 from '@/assets/image/my/toolsBox_7.png';
import toolsBox8 from '@/assets/image/my/toolsBox_8.png';
import toolsBox9 from '@/assets/image/my/toolsBox_9.png';
import toolsBox10 from '@/assets/image/my/toolsBox_10.png';
import toolsBox11 from '@/assets/image/my/toolsBox_11.png';
import toolsBox12 from '@/assets/image/my/toolsBox_12.png';

// const dataList = [
//   {
//     moreData: [
//       {
//         title: '优惠券',
//         img: couponCenter,
//         type: 'myCoupon',
//         url: '/pages/package-A/customer/my-coupon/index',
//       },
//       {
//         title: '我的积分',
//         img: myPoint,
//         type: 'myPoint',
//         url: '/pages/package-C/points-mall/index',
//       },
//       {
//         title: '收货地址',
//         img: address,
//         type: 'address',
//         url: '/pages/package-D/address/index',
//       },
//       {
//         title: '客服热线',
//         img: customer,
//         type: 'customer',
//       },
//       {
//         title: '消息中心',
//         img: msg,
//         type: 'msg',
//         url: '/pages/package-A/message/index',
//       },
//       {
//         title: '我的贴子',
//         img: bbs,
//         type: 'bbs',
//         url: '/pages/package-C/myPost/index',
//       },
//       {
//         title: '我的活动',
//         img: active,
//         type: 'active',
//         url: '/pages/package-C/activity/myActive/index',
//       },
//       {
//         title: '问卷调查',
//         img: question,
//         type: 'question',
//         url: '/pages/package-A/question-survery/index',
//       },
//     ],
//   },
//   {
//     moreData: [
//       {
//         title: '投诉建议',
//         img: complaints,
//         type: 'complaints',
//         url: '/pages/package-A/complaints/index',
//       },
//     ],
//   },
// ];

const moreData = [
  {
    title: '魔力乐园',
    img: toolsBox1,
    type: 'ipland',
    url: '/pages/package-I/home/index',
  },
  {
    title: '投诉建议',
    img: toolsBox2,
    type: 'complaints',
    url: '/pages/package-A/complaints/index',
  },
  {
    title: '问卷调查',
    img: toolsBox3,
    type: 'address',
    url: '/pages/package-A/question-survery/index',
  },
  {
    title: '客服热线',
    img: toolsBox4,
    type: 'customer',
  },
  {
    title: '开通记录',
    img: toolsBox5,
    type: 'activationRecord',
    url: '/pages/package-A/activationRecord/index',
  },
  {
    title: '消息中心',
    img: toolsBox6,
    type: 'message',
    url: '/pages/package-A/message/index',
  },
  {
    title: '我的贴子',
    img: toolsBox7,
    type: 'myPost',
    url: '/pages/package-C/myPost/index',
  },
  {
    title: '收货地址',
    img: toolsBox8,
    type: 'address',
    url: '/pages/package-D/address/index',
  },
  {
    title: '我的奖励',
    img: toolsBox9,
    type: 'prizesRecord',
    url: '/pages/package-C/prizesRecord/index',
  },
  {
    title: '我的礼包',
    img: toolsBox10,
    type: 'myGiftPack',
    url: '/pages/package-B/myGiftPack/index',
  },
  {
    title: '房产管家',
    img: toolsBox11,
    type: 'house',
    url: '/pages/package-A/house/index',
  },
  {
    title: '物业维修',
    img: toolsBox12,
    type: 'repair',
    url: '/pages/package-A/repair/index',
  },
];

type IToolsBoxProps = T.IProps & T.IToolsBoxProps;
//@ts-ignore
@connect<Partial<IToolsBoxProps>, T.IToolsBoxState>(store2Props, actions)
export default class Info extends Component<Partial<IToolsBoxProps>, T.IToolsBoxState> {
  constructor(props: IToolsBoxProps) {
    super(props);
  }

  // 工具栏
  getToolsBox(listData) {
    let {
      main: {
        isAquamarineMember, //是否蓝晶会员标志 false：否，true：是
        isCrystalMember, //是否赤晶会员标志 false：否，true：是
      },
      actions: {action},
    } = this.props;
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View
          className="item"
          onClick={() => {
            // if (!this.props.main.isLogin) {
            //   Taro.navigateTo({
            //     url: '/pages/package-C/login/login/index',
            //   });
            //   return
            // }
            if (Taro.getStorageSync('blacklistModel')) {
              action.commonChange('main.blacklistModel', true);
              return;
            }
            if (item.type == 'customer') {
              this.props.actions.action.commonChange('main.visible', true);
            } else if (item.type == 'none') {
              Taro.showToast({
                title: '敬请期待~',
                icon: 'none',
              });
              return;
            } else if (item.type == 'ipland') {
              Taro.navigateTo({
                url: `/pages/package-I/home/index?isAquamarineMember=${isAquamarineMember}&isCrystalMember=${isCrystalMember}`,
              });
              // Taro.showToast({
              //   title: '敬请期待~',
              //   icon: 'none',
              // });
              return;
            } else {
              this.itemClick(item);
            }
          }}
        >
          <Image className="img" src={item.img} mode="heightFix" />
          <Text className="title">{item.title}</Text>
        </View>,
      );
    });
    return toolsView;
  }

  async itemClick(item) {
    Taro.navigateTo({
      url: item.url,
    });
  }

  render() {
    let {
      main,
      actions: {action},
    } = this.props;
    return (
      <View className="PageUserCenterToolsBox">
        {/* <Swiper
          indicatorColor="#0B86FE"
          indicatorActiveColor="#CCCCCC"
          circular
          indicatorDots
          className="banner-swiper"
        >
          {dataList.map((item) => {
            return (
              <SwiperItem>
                <View className="toolsBox">{this.getToolsBox(item.moreData)}</View>
              </SwiperItem>
            );
          })}
        </Swiper> */}
        <View style={{padding: '15rpx 30rpx'}}>
          <Text style={{color: '#333333', fontSize: '32rpx'}}>常用功能</Text>
        </View>
        <View className="toolsBox">{this.getToolsBox(moreData)}</View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
